<script lang="tsx">
/**
 * 采购订单
 */
export default {
  name: "purchase-order"
}
</script>

<script lang="tsx" setup>
import {ref} from 'vue'
import {definePageModel, PageModel} from "@/frame/view/layout/page-model/constructor.ts"
import {processRequest} from "@/frame/apis/request";
import {ElMessage, ElMessageBox} from "element-plus";
import OrderDetail from "./components/order-detail/index.vue";
import OrderForm from "./components/order-form/index.vue";
import {ExamStatus, PurchaseType} from "./purchase-order.ts";

/**
 * 页面配置
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: "/api/PurchaseOrder",
  searchForm: {
    els: [
      {
        eType: 'el-input',
        prop: "code",
        props: {
          placeholder: "单据编码",
          clearable: true
        }
      },
      {
        eType: 'el-input',
        prop: "cardNo",
        props: {
          placeholder: "流转卡号",
          clearable: true
        }
      },
      {
        eType: 'el-input',
        prop: "supplier",
        props: {
          placeholder: "供应商名称",
          clearable: true
        }
      },
      {
        eType: 'el-select',
        prop: "examStatus",
        props: {
          placeholder: "审核状态",
          clearable: true
        },
        optionsData: {
          list: [
            {
              label: "待审核",
              value: 0
            },
            {
              label: "审核通过",
              value: 1
            },
            {
              label: "审核不通过",
              value: 2
            }
          ],
          label: "label",
          value: "value"
        }
      }
    ]
  },
  programForm: {
    els: [
      {
        label: "新增",
        eType: "el-button",
        props: {
          type: "primary"
        },
        event: "add"
      }
    ]
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    props: {
      stripe: false,
      border: false
    },
    operation: {
      width: 280,
      props: {
        fixed: "right"
      },
      els: [
        {
          eType: "el-button",
          label: "审核通过",
          event: "pass",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        },
        {
          eType: "el-button",
          label: "审核不通过",
          event: "un-pass",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        },
        {
          eType: "el-button",
          label: "反审核",
          event: "cancel-pass",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        },
        {
          eType: "el-button",
          label: "详情",
          event: "detail",
          props: {
            type: "primary",
            link: true
          },
          hide: false
        },
        {
          label: "删除",
          eType: "el-button",
          props: {
            type: "danger",
            link: true
          },
          event: "delete"
        }
      ]
    },
    els: [
      {
        label: "单据编码",
        prop: "code",
        minWidth: 100
      },
      {
        label: "流转卡号",
        prop: "cardNo",
        minWidth: 100
      },
      {
        label: "供应商编码",
        prop: "supplierCode",
        minWidth: 120
      },
      {
        label: "供应商名称",
        prop: "supplierName",
        minWidth: 120
      },
      {
        label: "供应商联系方式",
        prop: "supplierPhone",
        minWidth: 150
      },
      {
        label: "审核状态",
        prop: "examStatus",
        minWidth: 100,
        renderFn(data) {
          return <span>{ExamStatus[data.examStatus]}</span>
        }
      },
      {
        label: "附件",
        prop: "file",
        minWidth: 150
      },
      {
        label: "备注",
        prop: "remark",
        minWidth: 200
      },
      {
        label: "创建时间",
        prop: "createTime",
        minWidth: 200
      }
    ]
  }
})

/**
 * 详情
 */
const orderDetailRef = ref()
const handleDetail = (row: any) => {
  orderDetailRef.value.show({
    id: row.id
  })
}

/**
 * 新增
 */
const orderFormRef = ref()
const handleAdd = () => {
  orderFormRef.value.show()
}

/**
 * 删除
 */
const handleDelete = (row: any) => {
  pageModelRef.value.handleDelete(row)
}

/**
 * 刷新
 */
const handleRefresh = () => {
  pageModelRef.value.refreshTableData()
}

/**
 * 审核
 */
const handlePass = async (row: any) => {
  await ElMessageBox.confirm("是否确认审核通过?", "审核", {
    type: "warning"
  })
  await processRequest.post("/api/PurchaseOrder/Pass?id=" + row.id)
  ElMessage.success("审核通过")
  handleRefresh()
}

/**
 * 审核不通过
 */
const handleUnPass = async (row: any) => {
  await ElMessageBox.confirm("是否确认审核不通过?", "审核", {
    type: "warning"
  })
  await processRequest.post("/api/PurchaseOrder/UnPass?id=" + row.id)
  ElMessage.success("审核不通过成功")
  handleRefresh()
}

/**
 * 反审核
 */
const handleCancelPass = async (row: any) => {
  await ElMessageBox.confirm("是否确认反审核?", "反审核", {
    type: "warning"
  })
  await processRequest.post("/api/PurchaseOrder/CancelPass?id=" + row.id)
  ElMessage.success("反审核成功")
  handleRefresh()
}
</script>

<template>
  <PageModel ref="pageModelRef" :PageModel="config" @add="handleAdd"
             @cancelPass="handleCancelPass"
             @delete="handleDelete" @detail="handleDetail"
             @pass="handlePass"
             @refresh="handleRefresh"
             @unPass="handleUnPass"
  />
  <OrderDetail ref="orderDetailRef"/>
  <OrderForm ref="orderFormRef" @confirm="handleRefresh"/>
</template>